<template>
  <div>
    <div
      v-if="isPageShow"
      class="wrap header-pc"
      style="background: none !important; padding: 0px !important"
    >
      <div class="container">
        <!-- header头部 -->
        <!-- <div class="logo-wrap">
          <div class="logo" @click="handleGoHome"></div>
          <div class="logo-text" @click="handleGoHome">金职培训库</div>
        </div> -->
        <!-- login部分 -->
        <div class="logintitle"></div>
        <div class="login">
          <div class="from">
            <div style="font-size: 20px; width: 100%; padding: 40px 53px">
              忘记密码
            </div>
            <el-form
              :model="ruleForm"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
              :rules="passRules"
            >
              <el-form-item prop="iphone" class="code-item">
                <el-input
                  v-model.trim="ruleForm.mobile"
                  class="input"
                  placeholder="请输入手机号"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item class="code-item">
                <div class="code-box">
                  <el-input
                    class="code-input"
                    v-model.trim="ruleForm.code"
                    style="width: 150px"
                    placeholder="请输入验证码"
                    clearable
                  >
                  </el-input>
                  <el-button
                    type="primary"
                    style="margin: 0px 0px 0px 20px"
                    @click="handleSendCode"
                    v-if="!isShowtime"
                    >获取验证码</el-button
                  >
                  <el-button style="margin: 0px 0px 0px 10px" disabled v-else
                    >{{ time }}秒后重新获取</el-button
                  >
                  <!-- <span class="code-img"
                    ><el-image :src="codeUrl ? codeUrl : ''">
                      <div slot="error" class="image-slot">正在加载验证码</div>
                    </el-image></span
                  > -->
                </div>
              </el-form-item>
              <el-form-item prop="pass" class="code-item">
                <el-input
                  type="password"
                  v-model.trim="ruleForm.password"
                  show-password
                  class="input"
                  placeholder="请输入至少8位的新密码"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item prop="confirmPassword" class="code-item">
                <el-input
                  type="password"
                  v-model.trim="isTruepassword"
                  show-password
                  class="input"
                  placeholder="确认新密码"
                  clearable
                ></el-input>
              </el-form-item>
            </el-form>

            <el-button type="primary" class="btn" @click="handleSubmit"
              >提 交 并 登 录</el-button
            >
            <a
              v-if="activeName === 'T'"
              class="from-a"
              @click="() => $router.push('/login')"
              >返 回 登 录</a
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Base64 } from "js-base64";
import { STATUS_CODE_OK } from "@/config";
import { forgetPassword, sendCode } from "@/api/loginPage.js";
import { validConfirmPass, checkPhone, checkPass } from "@/utils/fromcheck.js";
export default {
  name: "LoginPage",
  data() {
    return {
      isShowtime: false,
      timer: null,
      time: 60,
      activeName: "T",
      isPageShow: true, //页面是否显示
      codeUrl: "", // 验证码图片
      ruleForm: {
        mobile: "",
        password: "",
        code: "",
      }, // 表单是数据
      isTruepassword: "", // 确认密码
      validConfirmPass,
      checkPhone,
      checkPass,
      passRules: {
        pass: [
          {
            validator: (rules, value, callback) =>
              this.checkPass(this.ruleForm.password, callback),
            trigger: "blur",
          },
        ],
        iphone: [
          {
            validator: (rules, value, callback) =>
              this.checkPhone(this.ruleForm.mobile, callback),
            trigger: "blur",
          },
        ],
        confirmPassword: [
          {
            validator: (rules, value, callback) =>
              this.validConfirmPass(
                this.ruleForm.password,
                this.isTruepassword,
                callback
              ),
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {},
  methods: {
    // 发送手机验证码
    async handleSendCode() {
      if (this.ruleForm.mobile) {
        let { data } = await sendCode({
          mobile: this.ruleForm.mobile,
        });
        if (data.code == STATUS_CODE_OK) {
          if (data.msg == "忘记密码仅限教师用户使用!") {
            this.$notify.warning({
              title: "提示",
              message: data.msg,
            });
            return;
          }
          this.isShowtime = true;
          this.timer = setInterval(() => {
            this.time -= 1;
            if (this.time <= 0) {
              this.isShowtime = false;
              clearInterval(this.timer);
              this.time = 60;
            }
          }, 1000);
        }
      } else {
        this.$notify.warning({
          title: "提示",
          message: "手机号不能为空",
        });
        return;
      }
    },
    // 跳转首页
    handleGoHome() {
      this.$router.push("/");
    },
    // 提交
    async handleSubmit() {
      if (!this.ruleForm.mobile) {
        this.$notify.warning({
          title: "提示",
          message: "手机号不能为空！",
        });
        return;
      }
      if (!this.ruleForm.code) {
        this.$notify.warning({
          title: "提示",
          message: "验证码不能为空！",
        });
        return;
      }
      if (!this.ruleForm.password) {
        this.$notify.warning({
          title: "提示",
          message: "密码不能为空！",
        });
        return;
      }
      if (!this.ruleForm.code) {
        this.$notify.warning({
          title: "提示",
          message: "验证码不能为空！",
        });
        return;
      }
      let { data } = await forgetPassword({
        mobile: this.ruleForm.mobile,
        password: Base64.encode(this.ruleForm.password),
        code: this.ruleForm.code,
      });
      if (data.code == STATUS_CODE_OK) {
        this.ruleForm = {};
        this.isTruepassword = "";
        if (data.msg == "修改成功") {
          this.$notify.success({
            title: "成功",
            message: data.msg,
          });
          this.$router.push("/login");
          return;
        } else {
          this.$notify.warning({
            title: "提示",
            message: data.msg,
          });
          return;
        }
      }
    },
  },
  components: {},
};
</script>

<style scoped lang="scss">
$bg-color: #fff;
::v-deep .el-image {
  width: 100%;
  height: 100%;
}
::v-deep .el-form {
  margin: 0px auto;
}
::v-deep .el-form-item__content {
  margin-left: 0px !important;
}
::v-deep .el-form-item__label {
  width: 80px !important;
  text-align: center !important;
  margin-left: 10px;
}
::v-deep .el-tabs__item {
  width: 180px;
  font-size: 20px;
  line-height: 20px;
}

.header-pc {
  .container {
    position: relative;
    width: 100%;
    height: calc(100vh);
    background: url("../../assets/images/login.png") 100% 100% no-repeat;
    background-size: cover;
    background-position: 10% 40%;
    .logintitle {
      background: url(/img/logintitle.0de10477.png) 100% 100% no-repeat;
      width: 100%;
      height: 200px;
      position: absolute;
      top: 41px;
      right: 246px;
    }
    .login {
      background: #fff;
      height: 500px;
      width: 420px;
      position: absolute;
      top: 280px;
      right: 220px;
      border-radius: 10px;
      box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
      .from {
        flex: 0.64;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        .tab {
          color: #fff;
          margin-left: 10px;
          margin: 0px auto;
          margin-bottom: 40px;
          padding: 0px 30px;
          text-align: center;
        }
        .from-a {
          margin-top: 20px;
          margin-left: 64px;
        }
        .demo-ruleForm {
          .input {
            width: 300px;
          }
          .code-item {
            display: flex;
            align-items: center;
            .code-box {
              width: 100%;
              height: 100%;
              display: flex;
              .refresh {
                line-height: 20px;
                margin-left: 10px;
                width: 30px;
                display: inline-block;
              }
              .code-input {
                width: 200px;
              }
              .code-img {
                width: 100px;
                height: 40px;
                display: inline-block;
                margin-left: 10px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
      .btn {
        margin: 0px auto;
        margin-top: 20px;
        width: 300px;
      }
    }
    .logo-wrap {
      display: flex;
      align-items: center;
      padding-top: 20px;
      cursor: pointer;
      .logo {
        height: 52px;
        margin-right: 12px;
        width: 52px;
        background: pink;
      }
      .logo-text {
        height: 52px;
        line-height: 52px;
        font-size: 18px;
      }
    }
  }
}
.wrap {
  padding-bottom: 30px;
  position: relative;
  background-color: $bg-color;
  .banner-wrap {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    margin: 30px;
    .banner {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      // object-fit: cover;
      z-index: 1;
    }
  }
}
</style>
